<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none
        }
        .iconfont{
           color:red;
        }
    
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- <i v-for="item in count" :key="item.id"  class=" iconfont icon-Starlarge-copy" :class></i>
        <i v-for="item in count"  class="iconfont icon-star-copy" @mouseenter=""></i> -->
        <i v-for="item in count" class="iconfont" 
        :class=" item <= tempScore?'icon-Starlarge-copy':'icon-star-copy'"
        @mouseenter="tempScore=item"
        @mouseleave="tempScore=score"
        @click="score=item"></i>
       


    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1304316_m3n4e7w0qbh.css">
    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    count:10,
                    score:5,
                    tempScore:0
                }
            },
            created() {
                this.tempScore = this.score
            },
        })
    
    </script>
</body>
</html>